<template>
  <my-template>
    <div class="map-view">
      <div id="cesiumDiv" style="
              position: absolute;
              top: 0px;
              left: 0px;
              height: 100%;
              width: 100%;
              z-index: 0;
            "></div>
    </div>

    <div class="lsw-geocoding-box">
      <div class="lsw-geocoding-button" v-if="divTopFlag != 1" @click="divTopClick('1')">模糊匹配</div>
      <div class="lsw-geocoding-button-A" v-if="divTopFlag == 1" @click="divTopClick('')">模糊匹配</div>
      <div class="lsw-geocoding-button" v-if="divTopFlag != 2" style="left: 150px" @click="divTopClick('2')">逆向匹配</div>
      <div class="lsw-geocoding-button-A" v-if="divTopFlag == 2" style="left: 150px" @click="divTopClick('')">逆向匹配</div>

      <div v-if="divTopFlag == 1" class="lsw-geocoding-box1">
        <el-row>
          <el-col :span="16">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" icon="el-icon-search" @click="fuzzyMatching()" style="margin-left: 10px">匹配</el-button>
          </el-col>
        </el-row>
      </div>

      <div v-if="divTopFlag == 2" class="lsw-geocoding-box1">
        <el-form label-width="40px">
          <el-row :gutter="10">
            <el-col :span="5">
              <el-form-item>
              <span slot="label">
                <div style="color: black;font-size: 14px;text-align: center;"><strong>经度</strong></div>
              </span>
                <el-input v-model="lng" placeholder="经度" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item>
              <span slot="label">
                <span style="color: black;text-align: center;"><strong>纬度</strong></span>
              </span>
                <el-input v-model="lat" placeholder="纬度" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item>
              <span slot="label">
                <span style="color: black;text-align: center;"><strong>缓冲</strong></span>
              </span>
                <el-input v-model="buffer"></el-input>
              </el-form-item>
            </el-col>
            <!--          <el-col :span="5">-->
            <!--            <el-form-item>-->
            <!--              <span slot="label">-->
            <!--                <span style="color: white"><strong>分类</strong></span>-->
            <!--              </span>-->
            <!--              <el-select v-model="type" style="height: 60%;">-->
            <!--                <el-option label="全部" value="shanghai"></el-option>-->
            <!--                <el-option label="林业" value="beijing"></el-option>-->
            <!--                <el-option label="教育" value="shanghai"></el-option>-->
            <!--&lt;!&ndash;                <el-option label="区域二" value="beijing"></el-option>&ndash;&gt;-->
            <!--&lt;!&ndash;                <el-option label="区域二" value="beijing"></el-option>&ndash;&gt;-->
            <!--              </el-select>-->
            <!--            </el-form-item>-->
            <!--          </el-col>-->
            <el-col :span="5">
              <el-button type="primary" icon="el-icon-search" @click="reverseQuery(),locationClick('1')" style="margin-left: 10px">匹配</el-button>
            </el-col>
            <el-col :span="4">
              <el-button v-if="locationFlag == '1'" icon="el-icon-location-outline" style="width: 55px; height: 40px" @click="locationClick('2')"></el-button>
              <el-button v-if="locationFlag == '2'" type="primary" icon="el-icon-location-outline" style="width: 55px; height: 40px;" @click="locationClick('1')"></el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>

    <div class="lsw-geocoding-box-table" v-if="tableFlag == '1'">
      <el-table
              :data="locationInfos"
              border
              :highlight-current-row="true"
              :header-cell-style="{'text-align':'center','backgroundColor':'#F5F7FA','color':'black','border':'0.5px solid #005aca'}"
              @row-click="locationInfos1RowClick"
              style="width: 100%; border: 1px solid #005aca;">
        <el-table-column
                prop="name"
                align="center"
                label="地名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="detailedAddress"
                align="center"
                label="地名地址"
                width="200">
        </el-table-column>
        <el-table-column
                prop="lng"
                align="center"
                label="经度">
        </el-table-column>
        <el-table-column
                prop="lat"
                align="center"
                label="纬度">
        </el-table-column>
      </el-table>
    </div>
    <div class="lsw-geocoding-box-table1" v-if="tableFlag == '1'">
      <div style="position: relative;left: 590px;">共 {{locationInfos.length}} 条</div>
    </div>

    <div class="lsw-geocoding-box-table" v-if="tableFlag == '2'">
      <el-table
              :data="locationInfos1"
              border
              :highlight-current-row="true"
              :header-cell-style="{'text-align':'center','backgroundColor':'#F5F7FA','color':'black','border':'0.5px solid #005aca'}"
              @row-click="locationInfos1RowClick"
              style="width: 100%; border: 1px solid #005aca;">
        <el-table-column
                prop="name"
                label="地名"
                align="center"
                width="160">
        </el-table-column>
        <el-table-column
                prop="detailedAddress"
                label="地名地址"
                align="center"
                width="180">
        </el-table-column>
        <el-table-column
                prop="lng"
                align="center"
                label="经度">
        </el-table-column>
        <el-table-column
                prop="lat"
                align="center"
                label="纬度">
        </el-table-column>
        <el-table-column
                prop="distance"
                align="center"
                label="距离">
        </el-table-column>
      </el-table>
    </div>

    <div class="lsw-geocoding-box-table1" v-if="tableFlag == '2'">
      <div style="position: relative;left: 590px;">共 {{locationInfos1.length}} 条 </div>
    </div>

    <!-- 左下角经纬度显示-->
    <div class="lonLat">
      <el-row>
        <el-col :span="4">
          <span>经度：{{positionLon}}</span>
        </el-col>
        <el-col :span="4">
          <span>纬度：{{positionLat}}</span>
        </el-col>
        <el-col :span="4">
          <span>高度：{{positionHeight}}</span>
        </el-col>
        <el-col :span="4">
          <span>视点高：{{cameraHeight}}</span>
        </el-col>
        <el-col :span="4">
          <span>视角方向：{{cameraHeading}}</span>
        </el-col>
        <el-col :span="4">
          <span>俯仰角：{{cameraPitch}}</span>
        </el-col>
      </el-row>
    </div>
  </my-template>
</template>
<script>
  import MyTemplate from "@/components/my-template";
  import $axios from "@/network/shiyong.js";

  var map;
  var draw;
  var source;
  var vector;
  var feature;
  var viewer;
  var handler;
  export default {
    name: "index",
    components: {
      MyTemplate
    },
    data() {
      return {
        oldRow: {},

        divTopFlag: '1',
        input: '',//查询内容
        lng: '114.536545',//经度
        lat: '36.625658',//纬度
        buffer: '300',//查询半径
        type: '全部',//查询类型
        locationInfos: [],
        locationInfos1: [],
        tableFlag: '',
        locationFlag: '1',
        positionLon: 0, //经度
        positionLat: 0, //纬度
        positionHeight: 0, //高度
        cameraHeight: 0, //视点高
        cameraHeading: 0, //视角方向
        cameraPitch: 0, //俯仰角
        oldNew: '新',
      }
    },
    mounted() {
      this.load();
    },
    methods: {
      divTopClick(v) {
        this.divTopFlag = v;
        viewer.entities.removeAll();
        this.tableFlag = '';
      },
      fuzzyMatching() {
        viewer.entities.removeAll()
        this.locationInfos = [];
        this.tableFlag = '1';
        $axios({
          url: '/earthview/rest/services/geocodeserver/geoCodeQuery',
          params: {
            address: this.input,
            output: 'json'
          }
        }).then(res => {
          if (res.status == 200) {
            let data = [];
            data.push(res.data.locationInfos);


            for (let i = 1; i <= res.data.count; i++) {
              let arr = [];
              arr = data[0][i].location.split(',');
              viewer.entities.add({
                id: data[0][i].name,
                position: Cesium.Cartesian3.fromDegrees(parseFloat(arr[0]), parseFloat(arr[1]), 10),
                billboard: {
                  image: require("../../../assets/map/maps_point.png"),
                  width: 32,
                  height: 32,
                  pixelOffset: new Cesium.Cartesian2(0, -16), // default: (0, 0)
                }
              });
              let arrTable = {
                areaCode: data[0][i].areaCode,
                cityCode: data[0][i].cityCode,
                detailedAddress: data[0][i].detailedAddress,
                level: data[0][i].level,
                name: data[0][i].name,
                parentCode: data[0][i].parentCode,
                shortName: data[0][i].shortName,
                zipCode: data[0][i].zipCode,
                lng: arr[0],
                lat: arr[1]
              }
              this.locationInfos.push(arrTable);
            }
            this.tableFlag = '1';
          }
        })
      },

      reverseQuery() {
        // console.log(this.lng + ',' +this.lat);
        /*viewer.entities.removeAll();
        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(parseFloat(this.lng), parseFloat(this.lat), 10),
          billboard: {
            image: require("../../../assets/map/maps_point.png"),
            width: 32,
            height: 32,
            pixelOffset: new Cesium.Cartesian2(0, -16), // default: (0, 0)
          }
        });*/
        this.locationInfos1 = [];
        $axios({
          url: '/earthview/rest/services/geocodeserver/reGeoCodeQuery',
          params: {
            location: this.lng + ',' + this.lat,
            radius: parseFloat(this.buffer)
          }
        }).then(res => {
              let data = [];
              data.push(res.data.locationInfos);
              for (let i = 1; i <= res.data.count; i++) {
                let arr = [];
                arr = data[0][i].location.split(',');
                viewer.entities.add({
                  id: data[0][i].name,
                  position: Cesium.Cartesian3.fromDegrees(parseFloat(arr[0]), parseFloat(arr[1]), 1),
                  billboard: {
                    image: require("../../../assets/map/maps_point.png"),
                    width: 32,
                    height: 32,
                    pixelOffset: new Cesium.Cartesian2(0, -16), // default: (0, 0)
                  }
                });
                let distance = '';
                var satrt = Cesium.Cartographic.fromDegrees(this.lng, this.lat)
                var end = Cesium.Cartographic.fromDegrees(parseFloat(arr[0]), parseFloat(arr[1]))
                var geodesic = new Cesium.EllipsoidGeodesic();
                geodesic.setEndPoints(satrt, end);
                distance = geodesic.surfaceDistance;
                let arrTable = {
                  areaCode: data[0][i].areaCode,
                  cityCode: data[0][i].cityCode,
                  detailedAddress: data[0][i].detailedAddress,
                  level: data[0][i].level,
                  name: data[0][i].name,
                  parentCode: data[0][i].parentCode,
                  shortName: data[0][i].shortName,
                  zipCode: data[0][i].zipCode,
                  lng: arr[0],
                  lat: arr[1],
                  distance: distance.toString().substring(0, 7),
                }
                this.locationInfos1.push(arrTable);
              }
              this.tableFlag = '2';
            }
        )
      },
      locationInfos1RowClick(row) {
        if (this.oldNew == '新') {
          this.oldNew = '旧'
        }
        if (this.oldNew == '旧') {
          this.oldNew = '新'
        }
        viewer.entities.removeById('新');
        viewer.entities.removeById('旧');

        viewer.entities.removeById(this.oldRow.name);

        viewer.entities.add({
          id: this.oldRow.name,
          position: Cesium.Cartesian3.fromDegrees(parseFloat(this.oldRow.lng), parseFloat(this.oldRow.lat), 1500),
          billboard: {
            image: require("../../../assets/map/maps_point.png"),
            width: 32,
            height: 32
          }
        });

        viewer.entities.removeById(row.name);

        viewer.entities.add({
          id: row.name,
          position: Cesium.Cartesian3.fromDegrees(parseFloat(row.lng), parseFloat(row.lat), 10),
          billboard: {
            image: require("../../../assets/map/maps_pointNew.png"),
            width: 32,
            height: 32,
            pixelOffset: new Cesium.Cartesian2(0, -16), // default: (0, 0)
          }
        });

        viewer.scene.camera.flyTo({
          destination: new Cesium.Cartesian3.fromDegrees(parseFloat(row.lng), parseFloat(row.lat), 1500),
          duration: 0,
          orientation: {
            heading: 0,
            pitch: -1,
            roll: 0,
          },
          complete: function callback() {
          },
        });

        this.oldRow = row;
      },
      locationClick(v) {
        this.locationFlag = v;
        if (v == 1) {
          handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
        } else {
          handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
          handler.setInputAction(movement => {
            var position = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);

            var ellipsoid = viewer.scene.globe.ellipsoid;
            var cartesian3 = new Cesium.Cartesian3(parseFloat(position.x), parseFloat(position.y), parseFloat(position.z));
            var cartographic = ellipsoid.cartesianToCartographic(cartesian3);
            this.lat = Cesium.Math.toDegrees(cartographic.latitude).toString();
            this.lng = Cesium.Math.toDegrees(cartographic.longitude).toString();
            viewer.entities.removeAll();
            viewer.entities.add({
              position: Cesium.Cartesian3.fromDegrees(parseFloat(this.lng), parseFloat(this.lat), 10),
              billboard: {
                image: require("../../../assets/map/maps_point.png"),
                width: 32,
                height: 32,
                pixelOffset: new Cesium.Cartesian2(0, -16), // default: (0, 0)
              }
            });

          }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        }
      },
      load() {

        let height = 33746824;
        let width = 33554054;

        function BDImageryProvider(options) {

          // this._url = "https://api.map.baidu.com/customimage/tile?udt=20181205&scale=1&ak=1XjLLEhZhQNUzd93EjU5nOGQ&customid=dark";
          // this._url = "https://api.map.baidu.com/customimage/tile?udt=20181205&scale=1&ak=1XjLLEhZhQNUzd93EjU5nOGQ&customid=light";
          this._url = "https://api.map.baidu.com/customimage/tile?udt=20181205&scale=1&ak=1XjLLEhZhQNUzd93EjU5nOGQ&styles=pl";
          this._tileWidth = 256;
          this._tileHeight = 256;
          this._maximumLevel = 18;

          var rectangleSouthwestInMeters = new Cesium.Cartesian2(-width, -height);
          var rectangleNortheastInMeters = new Cesium.Cartesian2(width, height);
          this._tilingScheme = new Cesium.WebMercatorTilingScheme({ rectangleSouthwestInMeters: rectangleSouthwestInMeters, rectangleNortheastInMeters: rectangleNortheastInMeters });

          this._credit = undefined;
          this._rectangle = this._tilingScheme.rectangle;
          this._ready = true;
        }

        Object.defineProperties(BDImageryProvider.prototype, {
          url: {
            get: function () {
              return this._url;
            }
          },

          token: {
            get: function () {
              return this._token;
            }
          },

          proxy: {
            get: function () {
              return this._proxy;
            }
          },

          tileWidth: {
            get: function () {
              //>>includeStart('debug', pragmas.debug);
              if (!this._ready) {
                throw new DeveloperError('tileWidth must not be called before the imagery provider is ready.');
              }
              //>>includeEnd('debug');

              return this._tileWidth;
            }
          },

          tileHeight: {
            get: function () {
              //>>includeStart('debug', pragmas.debug);
              if (!this._ready) {
                throw new DeveloperError('tileHeight must not be called before the imagery provider is ready.');
              }
              //>>includeEnd('debug');

              return this._tileHeight;
            }
          },

          maximumLevel: {
            get: function () {
              //>>includeStart('debug', pragmas.debug);
              if (!this._ready) {
                throw new DeveloperError('maximumLevel must not be called before the imagery provider is ready.');
              }
              //>>includeEnd('debug');

              return this._maximumLevel;
            }
          },

          minimumLevel: {
            get: function () {
              //>>includeStart('debug', pragmas.debug);
              if (!this._ready) {
                throw new DeveloperError('minimumLevel must not be called before the imagery provider is ready.');
              }
              //>>includeEnd('debug');

              return 0;
            }
          },

          tilingScheme: {
            get: function () {
              //>>includeStart('debug', pragmas.debug);
              if (!this._ready) {
                throw new DeveloperError('tilingScheme must not be called before the imagery provider is ready.');
              }
              //>>includeEnd('debug');

              return this._tilingScheme;
            }
          },

          rectangle: {
            get: function () {
              //>>includeStart('debug', pragmas.debug);
              if (!this._ready) {
                throw new DeveloperError('rectangle must not be called before the imagery provider is ready.');
              }
              //>>includeEnd('debug');

              return this._rectangle;
            }
          },

          tileDiscardPolicy: {
            get: function () {
              //>>includeStart('debug', pragmas.debug);
              if (!this._ready) {
                throw new DeveloperError('tileDiscardPolicy must not be called before the imagery provider is ready.');
              }
              //>>includeEnd('debug');

              return this._tileDiscardPolicy;
            }
          },

          errorEvent: {
            get: function () {
              return this._errorEvent;
            }
          },

          ready: {
            get: function () {
              return this._ready;
            }
          },

          readyPromise: {
            get: function () {
              return this._readyPromise.promise;
            }
          },

          credit: {
            get: function () {
              return this._credit;
            }
          },

          usingPrecachedTiles: {
            get: function () {
              return this._useTiles;
            }
          },

          hasAlphaChannel: {
            get: function () {
              return true;
            }
          },

          layers: {
            get: function () {
              return this._layers;
            }
          }
        });

        BDImageryProvider.prototype.getTileCredits = function (x, y, level) {
          return undefined;
        };
        BDImageryProvider.prototype.requestImage = function (x, y, level) {
          if (!this._ready) {
            throw new DeveloperError('requestImage must not be called before the imagery provider is ready.');
          }

          var url = buildImageUrl(this, x, y, level);
          return Cesium.ImageryProvider.loadImage(this, url);
        };

        function buildImageUrl(imageryProvider, x, y, level) {
          var url = imageryProvider._url + "&x={x}&y={y}&z={z}";
          var tileW = imageryProvider._tilingScheme.getNumberOfXTilesAtLevel(level);
          var tileH = imageryProvider._tilingScheme.getNumberOfYTilesAtLevel(level);

          url = url.replace('{x}', x - tileW / 2)
              .replace('{y}', tileH / 2 - y - 1)
              .replace('{z}', level);

          return url;
        }


        var bdlayer = new BDImageryProvider();

        let vecProvider = new Cesium.WebMapTileServiceImageryProvider({
          url:"http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=e43ffa1ac324bb264615baf8882f0c16",
          layer: "tdtVecLayer",
          style: "default",
          format: "image/jpeg",
          tileMatrixSetID: "GoogleMapsCompatible"
        });
        let cavProvider =  new Cesium.WebMapTileServiceImageryProvider({
          url:"http://t0.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=e43ffa1ac324bb264615baf8882f0c16",
          layer: "tdtCvaLayer",
          style: "default",
          format: "image/jpeg",
          tileMatrixSetID: "GoogleMapsCompatible",
        });

        viewer = new Cesium.Viewer("cesiumDiv", {
          imageryProvider: vecProvider,
          animation: false,
          baseLayerPicker: false,
          fullscreenButton: false,
          geocoder: false,
          homeButton: false,
          infoBox: false,
          sceneModePicker: false,
          selectionIndicator: false,
          timeline: false,
          navigationHelpButton: false,
          sceneMode: 1, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode //2D 3D转换
          mapProjection : new Cesium.WebMercatorProjection(),//地图投影体系
          skyBox: new Cesium.SkyBox({
            // 自定义天空盒
            sources: {
              positiveX: "./Cesium/skybox/starmap_2020_16k_px.jpg",
              negativeX: "./Cesium/skybox/starmap_2020_16k_mx.jpg",
              positiveY: "./Cesium/skybox/starmap_2020_16k_py.jpg",
              negativeY: "./Cesium/skybox/starmap_2020_16k_my.jpg",
              positiveZ: "./Cesium/skybox/starmap_2020_16k_pz.jpg",
              negativeZ: "./Cesium/skybox/starmap_2020_16k_mz.jpg",
            },
          }),
        });
        if(Cesium.FeatureDetection.supportsImageRenderingPixelated()){//判断是否支持图像渲染像素化处理
          viewer.resolutionScale = window.devicePixelRatio;
        }
        //是否开启抗锯齿
        viewer.scene.fxaa = true;
        viewer.scene.postProcessStages.fxaa.enabled = true;
        // 文字无遮挡
        viewer.cesiumWidget.creditContainer.style.display = "none";
        viewer.scene.globe.depthTestAgainstTerrain = false; //实体不遮挡



        // 加载
        viewer.imageryLayers.addImageryProvider(cavProvider)

        viewer.scene.camera.flyTo({
          destination: new Cesium.Cartesian3.fromDegrees(118.700480, 39.74046828, 6000),
          duration: 0,
          complete: function callback() {
          },
        });

        //鼠标移动获取经纬高
        var pickPosition = new Cesium.EV_PointMeasure(viewer);
        pickPosition.pickPosition((lon, lat, height) => {
          // alert(lon)
          // this.positionLon = lon;
          // this.positionLat = lat;
          // this.positionHeight = height;
        });
        //视点高、视角方向、俯仰角
        pickPosition.theCameraHeight((cameraHeight, cameraHeading, cameraPitch) => {

          this.cameraHeight = cameraHeight; //视点高
          this.cameraHeading = cameraHeading; //视角方向
          this.cameraPitch = cameraPitch; //俯仰角
        });
        let handlerJWD = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        handlerJWD.setInputAction(movement => {
          var position = viewer.scene.camera.pickEllipsoid(movement.startPosition, viewer.scene.globe.ellipsoid);
          var ellipsoid = viewer.scene.globe.ellipsoid;
          var cartesian3 = new Cesium.Cartesian3(parseFloat(position.x), parseFloat(position.y), parseFloat(position.z));
          var cartographic = ellipsoid.cartesianToCartographic(cartesian3);
          this.positionLat = Cesium.Math.toDegrees(cartographic.latitude).toString().substring(0, 8);
          this.positionLon = Cesium.Math.toDegrees(cartographic.longitude).toString().substring(0, 8);
          this.positionHeight = Cesium.Math.toDegrees(cartographic.height).toString().substring(0, 8);

        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);


      },

    }
  }
</script>
<style lang="scss" scoped>
  .lsw-geocoding-box {
    position: absolute;
    border: 1px solid #005aca;
    height: 130px;
    width: 700px;
    color: black;
    padding: 10px;
    margin-top: 30px;
    background-color: #F5F7FA;
  }

  .lsw-geocoding-button {
    position: absolute;
    font-size: 16px;
    padding: 10px;
    border: 1px solid #005aca;
    border-radius: 5px;
  }

  .lsw-geocoding-button-A {
    position: absolute;
    font-size: 16px;
    padding: 10px;
    color: #b87d00;
    border: 1px solid #b87d00;
    border-radius: 5px;
  }

  .lsw-geocoding-box1 {
    margin-top: 70px;
  }

  .lsw-geocoding-box-table {
    position: absolute;
    top: 400px;
    border: 1px solid #005aca;
    height: 400px;
    width: 720px;
    color: #FFFFFF;
    background-color: rgba(10, 54, 70, 0.7);
    overflow-y: scroll;
  }
  .lsw-geocoding-box-table1 {
    position: absolute;
    top: 800px;
    border: 1px solid #005aca;
    width: 720px;
    color: black;
    background-color: #F5F7FA;
    overflow-y: scroll;
  }

  .lonLat {
    z-index: 999;
    position: absolute;
    bottom: 3%;
    left: 1%;
    width: 720px;
    height: 50px;
    color: black;
  }

  //滚动条
  .lsw-geocoding-box-table::-webkit-scrollbar {
    display: none;
  }

  //滚动条
  .lsw-geocoding-box-table1::-webkit-scrollbar {
    display: none;
  }


</style>